<template>
  <div>
    <!-- toubu -->
    <!-- 头部 -->
    <div class="nav_top d-flex jc-between ai-center bg-white border-bottom">
      <div> 
        <el-button type="text" @click="$router.push('/home')">
          <div class="iconfont icon-back ml-1 fs-xxxl text-dark"></div>
        </el-button>
      </div>
      <div class="fs-xxl text-dark pr-3">
        疫情实况
      </div>
      <div></div>
    </div>
    <div class="dataInfo py-3 px-3 mx-3 mx-3 my-3">
      <div class="d-flex">
        <div class="fs-xl pl-3">国内疫情</div> <div class="fs-sm text-grey pl-3">{{dataInfo.times}}</div>
      </div>
      

      <div class="d-flex jc-between flex-wrap ai-center text-c" style="word-break: keep-all">
          <div style="width: 32%" class="pb-2">
            <div class="py-2 fs-sm">累计确诊</div>
            <div class="fs-xxxl" style="color: #a31d13;font-weight: bold">{{dataInfo.gntotal}}</div>
            <div class="d-flex ai-center text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #a31d13">{{dataInfo.add_daily.addcon_new}}</div>
             </div>
            </div>
          </div>
          <div style="width: 32%" class="pb-2">
            <div class="py-2 fs-sm">累计死亡</div>
            <div class="fs-xxxl" style="color: #3d3d3d;font-weight: bold">{{dataInfo.deathtotal}}</div>
            <div class="d-flex ai-center text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #3d3d3d">{{dataInfo.add_daily.adddeath_new}}</div>
             </div>
            </div>
          </div>
          <div style="width: 32%" class="pb-2">
            <div class="py-2 fs-sm">累计治愈</div>
            <div class="fs-xxxl" style="color: #3cad76;font-weight: bold">{{dataInfo.curetotal}}</div>
            <div class="d-flex ai-center text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #3cad76">{{dataInfo.add_daily.addcure_new}}</div>
             </div>
            </div>
          </div>
          <div style="width: 32%" class="pb-2">
            <div class="py-2 fs-sm">现有确诊</div>
            <div class="fs-xxxl" style="color: #e44a3d;font-weight: bold">{{dataInfo.econNum}}</div>
            <div class="d-flex ai-center text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #e44a3d">{{dataInfo.add_daily.addecon_new}}</div>
             </div>
            </div>
          </div>
          <div style="width: 32%" class="pb-2">
            <div class="py-2 fs-sm">现有重症</div>
            <div class="fs-xxxl" style="color: #791618;font-weight: bold">{{dataInfo.heconNum}}</div>
            <div class="d-flex ai-center text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #791618">{{dataInfo.add_daily.addhecon_new}}</div>
             </div>
            </div>
          </div>
          <div style="width: 32%" class="pb-2">
            <div class="py-2 fs-sm">现有疑似</div>
            <div class="fs-xxxl" style="color: #ffb675;font-weight: bold">{{dataInfo.sustotal}}</div>
            <div class="d-flex ai-center text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #ffb675">{{dataInfo.add_daily.wjw_addsus_new}}</div>
             </div>
            </div>
          </div>
      </div>
      
    </div>
    <!-- 世界疫情数据 -->
    <div class="dataInfo py-3 px-3 mx-3 mx-3 my-3">
      <div class="d-flex">
        <div class="fs-xl pl-3">海外疫情</div> <div class="fs-sm text-grey pl-3">{{dataInfo.times}}</div>
      </div>
      

      <div class="d-flex jc-between flex-wrap ai-center text-c" style="word-break: keep-all">
          <div style="width: 25%" class="pb-2">
            <div class="py-2 fs-sm">累计确诊</div>
            <div class="fs-xxxl" style="color: #a31d13;font-weight: bold">{{worldInfo.certain}}</div>
            <div class="d-flex ai-center pl-2 text-c">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
                <div class="py-2 fs-sm text-grey text-c">较昨日</div> <div class="fs-sm text-c" style="color: #a31d13">{{worldInfo.certain_inc}}</div>
              </div>
            </div>
          </div>
          <div style="width: 25%" class="pb-2">
            <div class="py-2 fs-sm">累计死亡</div>
            <div class="fs-xxxl" style="color: #3d3d3d;font-weight: bold">{{worldInfo.die}}</div>
            <div class="d-flex ai-center text-c pl-2">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #3d3d3d">{{worldInfo.die_inc}}</div>
             </div>
            </div>
          </div>
          <div style="width: 25%" class="pb-2">
            <div class="py-2 fs-sm">累计治愈</div>
            <div class="fs-xxxl" style="color: #3cad76;font-weight: bold">{{worldInfo.recure}}</div>
            <div class="d-flex ai-center text-c pl-2">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
                 <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #3cad76">{{worldInfo.recure_inc}}</div>
             </div>
            </div>
          </div>
          <div style="width: 25%" class="pb-2">
            <div class="py-2 fs-sm">现有确诊</div>
            <div class="fs-xxxl" style="color: #e44a3d;font-weight: bold">{{worldInfo.ecertain}}</div>
            <div class="d-flex ai-center text-c pl-2">
              <div class="d-flex ai-center text-c" style="margin: 0 auto;">
               <div class="py-2 fs-sm text-grey">较昨日</div> <div class="fs-sm" style="color: #e44a3d">{{worldInfo.ecertain_inc}}</div>
             </div>
            </div>
          </div>
      </div>
    </div>
    <div class="pb-3">
      <div class="d-flex fs-xl text-grey jc-around">
        <router-link tag="div" to="/yiqin/map">国内确诊</router-link>
        <router-link tag="div" to="/yiqin/active">国内疫情动态</router-link>
        <router-link tag="div" to="/yiqin/worldMap">世界确诊</router-link>
      </div>
      

      
    </div>

    <router-view></router-view>
    
  </div>
</template>

<script>
import jsonp from 'jsonp';

import Loading from "../../components/public/loading";

export default {

  components: {

    Loading
  },


  data(){
    return {
       dataInfo: {
           add_daily: {}
       },
       worldInfo: {}
    }
  },
  created(){
    this.getData();
  },

  methods: {
     getData(){
         this.$store.commit('showLoading')
         jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json? =1580892522427',(err,data) => {
         this.$store.commit('hideLoading')
         this.worldInfo = data.data.othertotal
           this.dataInfo.times = data.data.times
           this.dataInfo.gntotal = data.data.gntotal
           this.dataInfo.deathtotal = data.data.deathtotal
           this.dataInfo.sustotal = data.data.sustotal
           this.dataInfo.curetotal = data.data.curetotal
           this.dataInfo.econNum = data.data.econNum
           this.dataInfo.heconNum = data.data.heconNum
           this.dataInfo.jwsrNum = data.data.jwsrNum
           this.dataInfo.add_daily = data.data.add_daily

       })
     }
  },
}
</script>

<style lang="scss" scoped>
.router-link-active{
    color: #e74e4e;

  }
.nav_top {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99
}
.dataInfo {
  // border: 1px solid #282923;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,.1);
}
</style>
